import React from 'react';

import { Tabs, Form, Input, Button, Alert, Row, Col } from 'antd';

import { FormInstance } from 'antd/lib/form';

const { TabPane } = Tabs;
const layout = {
  labelCol: { span: 5 },
  wrapperCol: { span: 19 },
};
const tailLayout = {
  wrapperCol: { offset: 5, span: 19 },
};

const Text = () => {
	return (
		<span>QQ号/微信号，请至少填写一项，订单有问题，我们好及时与您沟通。 <span style={{color: '#1890ff'}}>（绝不推销，信息安全保密）</span></span>
	)
}

export default class Message extends React.Component{
	formRef = React.createRef<FormInstance>();
	componentDidMount(){
		this.formRef.current?.setFieldsValue({value3: '2021-12-01 18:33:22'})
	}
	render(){
		return (
			<div style={{height: '100%',background: '#fff',padding: '12px 24px 24px' }}>
				<Tabs defaultActiveKey="1" onChange={() => {}}>
					<TabPane tab="个人信息" key="1">
						<div style={{width: 520}}>
							<Form {...layout} ref={this.formRef}>
								<Form.Item
	                                name="value1"
	                                label="我的账户："
	                            >
	                            	<Row gutter={8}>
	                            		<Col span={18}>
	                                	<Input placeholder="请输入我的账户" />
	                                </Col>
	                                <Col span={6}>
	                                	<Button style={{width: '100%'}} type="primary">未验证</Button>
	                                </Col>
	                              </Row>
	                            </Form.Item>
	                            <Form.Item
	                                name="value2"
	                                label="注册IP："
	                            >
	                                <Input placeholder="注册为首次注册IP地址" />
	                            </Form.Item>
	                            <Form.Item
	                                name="value3"
	                                label="注册时间："
	                            >
	                                <Input disabled placeholder="请输入注册时间" />
	                            </Form.Item>
	                            <Form.Item
	                                name="value4"
	                                label="昵称："
	                            >
	                                <Input placeholder="请输入昵称" />
	                            </Form.Item>
	                            <Form.Item
	                                name="value5"
	                                label="工作单位："
	                            >
	                                <Input placeholder="请输入工作单位" />
	                            </Form.Item>
	                            <Form.Item
	                                name="value6"
	                                label="QQ号码："
	                            >
	                                <Input placeholder="请输入QQ号码（这个更重要）" />
	                            </Form.Item>
	                            <Form.Item
	                                name="value7"
	                                label="微信号码："
	                            >
	                                <Input placeholder="请输入微信号码（这个更重要）" />
	                            </Form.Item>
	                            <Form.Item
	                                name="value8"
	                                label="常用邮箱："
	                            >
	                                <Input placeholder="请输入常用邮箱" />
	                            </Form.Item>
	                            <Form.Item {...tailLayout}>
	                            	<Button type="primary">
						                保存更新
						            </Button>
						            <Button style={{ margin: '0 8px' }}>
						                重置
						            </Button>
	                            </Form.Item>
							</Form>
							
						</div>
						<Alert  message="昵称 设置后不可更改。" type="info" showIcon />
						<Alert style={{marginTop: 6}} message="手机号未验证的用户，请尽快进行短信验证，以提升账户安全性。" type="info" showIcon />
						<Alert style={{marginTop: 6}} message={ <Text/> } type="info" showIcon />
					</TabPane>
				</Tabs>
			</div>
		)
	}
}